<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热门投票推荐</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1140px;
        }
        
        .page-title {
            text-align: center;
            margin: 2.5rem 0 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .page-title h1 {
            color: #3b82f6;
        }
        
        .section-heading {
            font-weight: 700;
            margin: 2.5rem 0 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #3b82f6;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            color: #334155;
        }
        
        .section-description {
            color: #64748b;
            margin-bottom: 1.5rem;
        }
        
        /* 投票卡片通用样式 */
        .vote-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .vote-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.1);
        }
        
        /* 投票类型标签 */
        .vote-type {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
        }
        
        .type-entertainment {
            background-color: #eff6ff;
            color: #1e40af;
        }
        
        .type-food {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .type-travel {
            background-color: #dcfce7;
            color: #166534;
        }
        
        .type-lifestyle {
            background-color: #fce7f3;
            color: #9d174d;
        }
        
        /* 卡片头部信息 */
        .vote-header {
            padding: 1rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .vote-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .vote-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #dbeafe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            flex-shrink: 0;
        }
        
        .vote-meta-info {
            font-size: 0.875rem;
        }
        
        .vote-creator {
            font-weight: 600;
            color: #1e293b;
        }
        
        /* 投票状态与参与度 */
        .vote-status {
            background-color: #f1f5f9;
            border-radius: 6px;
            padding: 0.5rem;
            text-align: center;
            font-size: 0.875rem;
            min-width: 120px;
        }
        
        .vote-participants {
            color: #3b82f6;
            font-weight: 600;
        }
        
        .vote-end {
            font-size: 0.75rem;
            color: #64748b;
            margin-top: 0.25rem;
        }
        
        /* 投票内容区域 */
        .vote-body {
            padding: 1.25rem;
        }
        
        .vote-title {
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        
        .vote-title a {
            color: #1e293b;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .vote-title a:hover {
            color: #3b82f6;
        }
        
        .vote-description {
            color: #64748b;
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        .vote-tags {
            margin-bottom: 1rem;
        }
        
        .tag-item {
            display: inline-block;
            background-color: #f1f5f9;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.8125rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            color: #334155;
        }
        
        /* 投票图片样式 */
        .vote-images {
            margin-bottom: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 3px;
        }
        
        .multiple-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .multiple-images.two-images img:first-child {
            grid-row: span 2;
        }
        
        .multiple-images.three-images img:first-child {
            grid-column: span 2;
            grid-row: span 2;
        }
        
        .multiple-images.four-images {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 投票结果摘要 - 不显示具体选项名称 */
        .vote-results {
            background-color: #f8fafc;
            border-radius: 8px;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        
        .results-header {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #334155;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .results-bar-container {
            margin-bottom: 0.75rem;
        }
        
        .result-item {
            margin-bottom: 0.75rem;
        }
        
        .result-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.25rem;
            font-size: 0.875rem;
        }
        
        .result-bar {
            height: 8px;
            background-color: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .result-fill {
            height: 100%;
            background-color: #3b82f6;
            border-radius: 4px;
            transition: width 1s ease-in-out;
        }
        
        /* 投票细节信息 */
        .vote-details {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #64748b;
        }
        
        .detail-item i {
            color: #3b82f6;
            width: 16px;
        }
        
        /* 互动区域 */
        .vote-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-top: 1px solid #f1f5f9;
        }
        
        .action-stats {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-size: 0.875rem;
            color: #64748b;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        .btn {
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-outline {
            background-color: transparent;
            color: #3b82f6;
            border: 1px solid #3b82f6;
        }
        
        .btn-outline:hover {
            background-color: #eff6ff;
        }
        
        /* 列表视图样式 */
        .list-view .vote-card {
            display: flex;
            height: 260px;
        }
        
        .list-view .vote-images {
            flex: 0 0 260px;
            margin-bottom: 0;
            border-radius: 12px 0 0 12px;
        }
        
        .list-view .vote-images img {
            height: 100%;
            object-fit: cover;
        }
        
        .list-view .vote-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .vote-body {
            flex: 1;
            overflow: hidden;
        }
        
        .list-view .vote-description {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 网格视图样式 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-view .vote-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .grid-view .vote-images {
            height: 200px;
        }
        
        .grid-view .vote-images img {
            height: 100%;
            object-fit: cover;
        }
        
        .grid-view .vote-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .vote-description {
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 无图片投票样式 */
        .no-image .vote-body {
            padding-top: 0;
        }
        
        /* 视图切换控件 */
        .view-controls {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .view-btn:hover:not(.active) {
            background-color: #eff6ff;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-view {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .list-view .vote-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-view .vote-images {
                flex: none;
                height: 200px;
                border-radius: 12px 12px 0 0;
            }
            
            .vote-details {
                gap: 0.75rem;
            }
            
            .action-buttons {
                gap: 0.5rem;
            }
            
            .btn {
                padding: 0.5rem 1rem;
                font-size: 0.8125rem;
            }
        }
        
        @media (max-width: 576px) {
            .grid-view {
                grid-template-columns: 1fr;
            }
            
            .vote-header {
                flex-direction: column;
                gap: 1rem;
            }
            
            .vote-status {
                align-self: flex-start;
            }
            
            .vote-actions {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }
            
            .action-stats {
                width: 100%;
                justify-content: space-around;
            }
            
            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }
            
            .btn {
                flex: 1;
                text-align: center;
            }
            
            .multiple-images {
                grid-gap: 2px;
            }
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="page-title">
            <h1 class="display-5 mb-2">热门投票推荐</h1>
            <p class="text-muted">发现社区正在讨论的热门话题，参与投票表达你的观点</p>
        </div>
        
        <!-- 娱乐投票 - 网格视图 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-film"></i> 娱乐投票
            </h2>
            <p class="section-description">关于电影、音乐、游戏等娱乐内容的热门投票</p>
            
            <!-- 视图切换 -->
            <div class="view-controls">
                <button class="view-btn active" id="grid-view-btn">
                    <i class="fas fa-th"></i> 网格视图
                </button>
                <button class="view-btn" id="list-view-btn">
                    <i class="fas fa-list"></i> 列表视图
                </button>
            </div>
            
            <div class="votes-container grid-view" id="votes-container">
                <!-- 带单张图片的投票 -->
                <div class="vote-card">
                    <div class="vote-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=10" alt="电影海报展示">
                        </div>
                    </div>
                    
                    <div class="vote-content">
                        <div class="vote-header">
                            <div class="vote-meta">
                                <div class="vote-icon">
                                    <i class="fas fa-film"></i>
                                </div>
                                <div class="vote-meta-info">
                                    发起者: <span class="vote-creator">电影爱好者</span>
                                </div>
                            </div>
                            
                            <div class="vote-status">
                                <div class="vote-participants">3.2k 人参与</div>
                                <div class="vote-end">还剩 2 天结束</div>
                            </div>
                        </div>
                        
                        <div class="vote-body">
                            <div class="vote-title">
                                <a href="#">
                                    <span class="vote-type type-entertainment">娱乐</span>
                                    你认为今年最佳科幻电影是哪部？
                                </a>
                            </div>
                            
                            <p class="vote-description">
                                今年有多部优秀的科幻电影上映，从太空探索到人工智能，每部都有其独特之处。来投票选出你心中的最佳科幻电影吧！
                            </p>
                            
                            <div class="vote-tags">
                                <span class="tag-item">电影</span>
                                <span class="tag-item">科幻</span>
                                <span class="tag-item">年度最佳</span>
                            </div>
                            
                            <div class="vote-results">
                                <div class="results-header">
                                    <i class="fas fa-chart-pie"></i> 投票结果摘要
                                </div>
                                <div class="results-bar-container">
                                    <!-- 不显示具体选项名称，只展示比例 -->
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>42%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 42%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>31%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 31%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>27%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 27%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="vote-details">
                                <div class="detail-item">
                                    <i class="fas fa-comment"></i>
                                    <span>568 条评论</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-share-alt"></i>
                                    <span>243 次分享</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>发布于 5 天前</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="vote-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>1.2k 点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>342 收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">参与投票</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的投票 -->
                <div class="vote-card">
                    <div class="vote-images">
                        <div class="multiple-images two-images">
                            <img src="https://picsum.photos/600/800?random=11" alt="音乐节现场">
                            <img src="https://picsum.photos/600/400?random=12" alt="歌手表演">
                        </div>
                    </div>
                    
                    <div class="vote-content">
                        <div class="vote-header">
                            <div class="vote-meta">
                                <div class="vote-icon">
                                    <i class="fas fa-music"></i>
                                </div>
                                <div class="vote-meta-info">
                                    发起者: <span class="vote-creator">音乐达人</span>
                                </div>
                            </div>
                            
                            <div class="vote-status">
                                <div class="vote-participants">1.8k 人参与</div>
                                <div class="vote-end">还剩 1 天结束</div>
                            </div>
                        </div>
                        
                        <div class="vote-body">
                            <div class="vote-title">
                                <a href="#">
                                    <span class="vote-type type-entertainment">娱乐</span>
                                    你最想参加哪个音乐节？
                                </a>
                            </div>
                            
                            <p class="vote-description">
                                夏季音乐节季即将到来，各大音乐节都公布了令人期待的演出阵容。你最想参加哪一个？投票告诉我们你的选择！
                            </p>
                            
                            <div class="vote-tags">
                                <span class="tag-item">音乐</span>
                                <span class="tag-item">音乐节</span>
                                <span class="tag-item">夏季</span>
                            </div>
                            
                            <div class="vote-results">
                                <div class="results-header">
                                    <i class="fas fa-chart-pie"></i> 投票结果摘要
                                </div>
                                <div class="results-bar-container">
                                    <!-- 不显示具体选项名称，只展示比例 -->
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>53%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 53%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>38%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 38%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>9%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 9%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="vote-details">
                                <div class="detail-item">
                                    <i class="fas fa-comment"></i>
                                    <span>324 条评论</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-share-alt"></i>
                                    <span>187 次分享</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>发布于 3 天前</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="vote-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>876 点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>215 收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">参与投票</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的投票 -->
                <div class="vote-card no-image">
                    <div class="vote-content">
                        <div class="vote-header">
                            <div class="vote-meta">
                                <div class="vote-icon">
                                    <i class="fas fa-gamepad"></i>
                                </div>
                                <div class="vote-meta-info">
                                    发起者: <span class="vote-creator">游戏迷</span>
                                </div>
                            </div>
                            
                            <div class="vote-status">
                                <div class="vote-participants">5.7k 人参与</div>
                                <div class="vote-end">已结束</div>
                            </div>
                        </div>
                        
                        <div class="vote-body">
                            <div class="vote-title">
                                <a href="#">
                                    <span class="vote-type type-entertainment">娱乐</span>
                                    你认为今年最值得期待的游戏大作是哪款？
                                </a>
                            </div>
                            
                            <p class="vote-description">
                                今年有许多备受期待的游戏大作即将发布，涵盖了角色扮演、射击、策略等多种类型。在已经发布的作品中，哪款最能打动你？
                            </p>
                            
                            <div class="vote-tags">
                                <span class="tag-item">游戏</span>
                                <span class="tag-item">电子游戏</span>
                                <span class="tag-item">游戏推荐</span>
                            </div>
                            
                            <div class="vote-results">
                                <div class="results-header">
                                    <i class="fas fa-chart-pie"></i> 投票结果摘要
                                </div>
                                <div class="results-bar-container">
                                    <!-- 不显示具体选项名称，只展示比例 -->
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>47%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 47%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>29%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 29%"></div>
                                        </div>
                                    </div>
                                    <div class="result-item">
                                        <div class="result-label">
                                            <span></span>
                                            <span>24%</span>
                                        </div>
                                        <div class="result-bar">
                                            <div class="result-fill" style="width: 24%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="vote-details">
                                <div class="detail-item">
                                    <i class="fas fa-comment"></i>
                                    <span>1254 条评论</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-share-alt"></i>
                                    <span>876 次分享</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>发布于 1 周前</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="vote-actions">
                            <div class="action-stats">
                                <div class="stat-item">
                                    <i class="far fa-heart"></i>
                                    <span>3.2k 点赞</span>
                                </div>
                                <div class="stat-item">
                                    <i class="far fa-bookmark"></i>
                                    <span>987 收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">查看结果</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 美食投票 - 带四张图片的投票 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-utensils"></i> 美食投票
            </h2>
            <p class="section-description">关于各地美食、餐厅和烹饪的精彩投票</p>
            
            <div class="vote-card">
                <div class="vote-images">
                    <div class="multiple-images four-images">
                        <img src="https://picsum.photos/600/600?random=21" alt="川菜展示">
                        <img src="https://picsum.photos/600/600?random=22" alt="粤菜展示">
                        <img src="https://picsum.photos/600/600?random=23" alt="湘菜展示">
                        <img src="https://picsum.photos/600/600?random=24" alt="鲁菜展示">
                    </div>
                </div>
                
                <div class="vote-content">
                    <div class="vote-header">
                        <div class="vote-meta">
                            <div class="vote-icon">
                                <i class="fas fa-utensils"></i>
                            </div>
                            <div class="vote-meta-info">
                                发起者: <span class="vote-creator">美食家</span>
                            </div>
                        </div>
                        
                        <div class="vote-status">
                            <div class="vote-participants">8.3k 人参与</div>
                            <div class="vote-end">还剩 3 天结束</div>
                        </div>
                    </div>
                    
                    <div class="vote-body">
                        <div class="vote-title">
                            <a href="#">
                                <span class="vote-type type-food">美食</span>
                                你最喜欢的中国菜系是哪一种？
                            </a>
                        </div>
                        
                        <p class="vote-description">
                            中国饮食文化博大精深，各大菜系各有特色。无论是麻辣鲜香的川菜，还是清淡鲜美的粤菜，都有其忠实爱好者。你最喜欢哪一种？
                        </p>
                        
                        <div class="vote-tags">
                            <span class="tag-item">美食</span>
                            <span class="tag-item">中餐</span>
                            <span class="tag-item">菜系</span>
                            <span class="tag-item">饮食文化</span>
                        </div>
                        
                        <div class="vote-results">
                            <div class="results-header">
                                <i class="fas fa-chart-pie"></i> 投票结果摘要
                            </div>
                            <div class="results-bar-container">
                                <!-- 不显示具体选项名称，只展示比例 -->
                                <div class="result-item">
                                    <div class="result-label">
                                        <span></span>
                                        <span>34%</span>
                                    </div>
                                    <div class="result-bar">
                                        <div class="result-fill" style="width: 34%"></div>
                                    </div>
                                </div>
                                <div class="result-item">
                                    <div class="result-label">
                                        <span></span>
                                        <span>28%</span>
                                    </div>
                                    <div class="result-bar">
                                        <div class="result-fill" style="width: 28%"></div>
                                    </div>
                                </div>
                                <div class="result-item">
                                    <div class="result-label">
                                        <span></span>
                                        <span>22%</span>
                                    </div>
                                    <div class="result-bar">
                                        <div class="result-fill" style="width: 22%"></div>
                                    </div>
                                </div>
                                <div class="result-item">
                                    <div class="result-label">
                                        <span></span>
                                        <span>16%</span>
                                    </div>
                                    <div class="result-bar">
                                        <div class="result-fill" style="width: 16%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="vote-details">
                            <div class="detail-item">
                                <i class="fas fa-comment"></i>
                                <span>2156 条评论</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-share-alt"></i>
                                <span>1254 次分享</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>全国参与</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-clock"></i>
                                <span>发布于 6 天前</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="vote-actions">
                        <div class="action-stats">
                            <div class="stat-item">
                                <i class="far fa-heart"></i>
                                <span>5.7k 点赞</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-bookmark"></i>
                                <span>1.8k 收藏</span>
                            </div>
                        </div>
                        
                        <div class="action-buttons">
                            <button class="btn btn-primary">参与投票</button>
                            <button class="btn btn-outline">分享</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 旅行投票 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-plane"></i> 旅行投票
            </h2>
            <p class="section-description">关于旅游目的地、旅行方式的热门投票</p>
            
            <div class="row">
                <!-- 左侧投票 -->
                <div class="col-md-6">
                    <div class="vote-card">
                        <div class="vote-images">
                            <div class="single-image">
                                <img src="https://picsum.photos/600/400?random=31" alt="海滩度假场景">
                            </div>
                        </div>
                        
                        <div class="vote-content">
                            <div class="vote-header">
                                <div class="vote-meta">
                                    <div class="vote-icon">
                                        <i class="fas fa-umbrella-beach"></i>
                                    </div>
                                    <div class="vote-meta-info">
                                        发起者: <span class="vote-creator">旅行达人</span>
                                    </div>
                                </div>
                                
                                <div class="vote-status">
                                    <div class="vote-participants">4.2k 人参与</div>
                                    <div class="vote-end">还剩 5 天结束</div>
                                </div>
                            </div>
                            
                            <div class="vote-body">
                                <div class="vote-title">
                                    <a href="#">
                                        <span class="vote-type type-travel">旅行</span>
                                        夏季你更喜欢哪种度假方式？
                                    </a>
                                </div>
                                
                                <p class="vote-description">
                                    夏天是度假的好时节，有人喜欢去海边享受阳光沙滩，有人喜欢去山区避暑纳凉，还有人喜欢探索历史文化名城。你更喜欢哪种度假方式？
                                </p>
                                
                                <div class="vote-tags">
                                    <span class="tag-item">旅行</span>
                                    <span class="tag-item">度假</span>
                                    <span class="tag-item">夏季</span>
                                </div>
                                
                                <div class="vote-results">
                                    <div class="results-header">
                                        <i class="fas fa-chart-pie"></i> 投票结果摘要
                                    </div>
                                    <div class="results-bar-container">
                                        <!-- 不显示具体选项名称，只展示比例 -->
                                        <div class="result-item">
                                            <div class="result-label">
                                                <span></span>
                                                <span>58%</span>
                                            </div>
                                            <div class="result-bar">
                                                <div class="result-fill" style="width: 58%"></div>
                                            </div>
                                        </div>
                                        <div class="result-item">
                                            <div class="result-label">
                                                <span></span>
                                                <span>27%</span>
                                            </div>
                                            <div class="result-bar">
                                                <div class="result-fill" style="width: 27%"></div>
                                            </div>
                                        </div>
                                        <div class="result-item">
                                            <div class="result-label">
                                                <span></span>
                                                <span>15%</span>
                                            </div>
                                            <div class="result-bar">
                                                <div class="result-fill" style="width: 15%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="vote-details">
                                    <div class="detail-item">
                                        <i class="fas fa-comment"></i>
                                        <span>876 条评论</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-share-alt"></i>
                                        <span>543 次分享</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-clock"></i>
                                        <span>发布于 2 天前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="vote-actions">
                                <div class="action-stats">
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i>
                                        <span>2.3k 点赞</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-bookmark"></i>
                                        <span>654 收藏</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-primary">参与投票</button>
                                    <button class="btn btn-outline">分享</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧投票 -->
                <div class="col-md-6">
                    <div class="vote-card no-image">
                        <div class="vote-content">
                            <div class="vote-header">
                                <div class="vote-meta">
                                    <div class="vote-icon">
                                        <i class="fas fa-suitcase"></i>
                                    </div>
                                    <div class="vote-meta-info">
                                        发起者: <span class="vote-creator">背包客</span>
                                    </div>
                                </div>
                                
                                <div class="vote-status">
                                    <div class="vote-participants">2.9k 人参与</div>
                                    <div class="vote-end">还剩 4 天结束</div>
                                </div>
                            </div>
                            
                            <div class="vote-body">
                                <div class="vote-title">
                                    <a href="#">
                                        <span class="vote-type type-travel">旅行</span>
                                        你旅行时更喜欢独自出行还是结伴而行？
                                    </a>
                                </div>
                                
                                <p class="vote-description">
                                    旅行的方式有很多种，有人喜欢独自旅行的自由与随性，有人喜欢与朋友或家人一起分享旅途的快乐。你更倾向于哪种旅行方式？
                                </p>
                                
                                <div class="vote-tags">
                                    <span class="tag-item">旅行</span>
                                    <span class="tag-item">旅行方式</span>
                                    <span class="tag-item">个人偏好</span>
                                </div>
                                
                                <div class="vote-results">
                                    <div class="results-header">
                                        <i class="fas fa-chart-pie"></i> 投票结果摘要
                                    </div>
                                    <div class="results-bar-container">
                                        <!-- 不显示具体选项名称，只展示比例 -->
                                        <div class="result-item">
                                            <div class="result-label">
                                                <span></span>
                                                <span>42%</span>
                                            </div>
                                            <div class="result-bar">
                                                <div class="result-fill" style="width: 42%"></div>
                                            </div>
                                        </div>
                                        <div class="result-item">
                                            <div class="result-label">
                                                <span></span>
                                                <span>58%</span>
                                            </div>
                                            <div class="result-bar">
                                                <div class="result-fill" style="width: 58%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="vote-details">
                                    <div class="detail-item">
                                        <i class="fas fa-comment"></i>
                                        <span>765 条评论</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-share-alt"></i>
                                        <span>432 次分享</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-clock"></i>
                                        <span>发布于 4 天前</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="vote-actions">
                                <div class="action-stats">
                                    <div class="stat-item">
                                        <i class="far fa-heart"></i>
                                        <span>1.5k 点赞</span>
                                    </div>
                                    <div class="stat-item">
                                        <i class="far fa-bookmark"></i>
                                        <span>321 收藏</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-primary">参与投票</button>
                                    <button class="btn btn-outline">分享</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const gridViewBtn = document.getElementById('grid-view-btn');
            const listViewBtn = document.getElementById('list-view-btn');
            const votesContainer = document.getElementById('votes-container');
            
            gridViewBtn.addEventListener('click', function() {
                votesContainer.classList.remove('list-view');
                votesContainer.classList.add('grid-view');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
            });
            
            listViewBtn.addEventListener('click', function() {
                votesContainer.classList.remove('grid-view');
                votesContainer.classList.add('list-view');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            
            // 参与投票按钮交互
            const voteButtons = document.querySelectorAll('.btn-primary');
            voteButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 检查按钮是否是"查看结果"
                    if (this.textContent.trim() === '查看结果') {
                        // 可以添加查看详细结果的逻辑
                        return;
                    }
                    
                    const originalText = this.textContent;
                    this.textContent = '已投票';
                    this.style.backgroundColor = '#10b981';
                    
                    // 更新参与人数
                    const voteCard = this.closest('.vote-card');
                    const participantsEl = voteCard.querySelector('.vote-participants');
                    if (participantsEl) {
                        let participantsText = participantsEl.textContent;
                        let participants = parseFloat(participantsText);
                        let unit = participantsText.replace(/[0-9.]/g, '').trim();
                        
                        // 处理k单位
                        if (unit === 'k') {
                            participants = Math.round(participants * 1000) + 1;
                            participantsEl.textContent = (participants / 1000).toFixed(1) + 'k 人参与';
                        } else {
                            participants = parseInt(participantsText) + 1;
                            participantsEl.textContent = participants + ' 人参与';
                        }
                    }
                    
                    // 添加投票成功提示
                    const notification = document.createElement('div');
                    notification.style.position = 'fixed';
                    notification.style.bottom = '20px';
                    notification.style.right = '20px';
                    notification.style.backgroundColor = '#10b981';
                    notification.style.color = 'white';
                    notification.style.padding = '0.75rem 1.25rem';
                    notification.style.borderRadius = '6px';
                    notification.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
                    notification.style.zIndex = '1000';
                    notification.style.transition = 'all 0.3s ease';
                    notification.textContent = '投票成功！';
                    
                    document.body.appendChild(notification);
                    
                    // 3秒后移除提示
                    setTimeout(() => {
                        notification.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(notification);
                        }, 300);
                    }, 3000);
                });
            });
            
            // 点赞功能
            const likeIcons = document.querySelectorAll('.stat-item .far.fa-heart');
            likeIcons.forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.style.color = this.classList.contains('fas') ? '#3b82f6' : '';
                    
                    // 更新点赞数
                    const statItem = this.parentElement;
                    let countText = statItem.textContent;
                    let count = parseFloat(countText);
                    let unit = countText.replace(/[0-9.]/g, '').trim().replace('点赞', '').trim();
                    
                    if (this.classList.contains('fas')) {
                        // 点赞
                        if (unit === 'k') {
                            count = Math.round(count * 10) / 10 + 0.1;
                            statItem.innerHTML = `<i class="fas fa-heart"></i><span>${count}k 点赞</span>`;
                        } else {
                            count = parseInt(countText) + 1;
                            statItem.innerHTML = `<i class="fas fa-heart"></i><span>${count} 点赞</span>`;
                        }
                    } else {
                        // 取消点赞
                        if (unit === 'k') {
                            count = Math.round(count * 10) / 10 - 0.1;
                            statItem.innerHTML = `<i class="far fa-heart"></i><span>${count}k 点赞</span>`;
                        } else {
                            count = parseInt(countText) - 1;
                            statItem.innerHTML = `<i class="far fa-heart"></i><span>${count} 点赞</span>`;
                        }
                    }
                });
            });
            
            // 收藏功能
            const bookmarkIcons = document.querySelectorAll('.stat-item .far.fa-bookmark');
            bookmarkIcons.forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.style.color = this.classList.contains('fas') ? '#3b82f6' : '';
                    
                    // 更新收藏数
                    const statItem = this.parentElement;
                    let countText = statItem.textContent;
                    let count = parseFloat(countText);
                    let unit = countText.replace(/[0-9.]/g, '').trim().replace('收藏', '').trim();
                    
                    if (this.classList.contains('fas')) {
                        // 收藏
                        if (unit === 'k') {
                            count = Math.round(count * 10) / 10 + 0.1;
                            statItem.innerHTML = `<i class="fas fa-bookmark"></i><span>${count}k 收藏</span>`;
                        } else {
                            count = parseInt(countText) + 1;
                            statItem.innerHTML = `<i class="fas fa-bookmark"></i><span>${count} 收藏</span>`;
                        }
                    } else {
                        // 取消收藏
                        if (unit === 'k') {
                            count = Math.round(count * 10) / 10 - 0.1;
                            statItem.innerHTML = `<i class="far fa-bookmark"></i><span>${count}k 收藏</span>`;
                        } else {
                            count = parseInt(countText) - 1;
                            statItem.innerHTML = `<i class="far fa-bookmark"></i><span>${count} 收藏</span>`;
                        }
                    }
                });
            });
            
            // 图片点击放大
            const voteImages = document.querySelectorAll('.vote-images img');
            voteImages.forEach(image => {
                image.addEventListener('click', function() {
                    // 创建全屏查看的模态框
                    const modal = document.createElement('div');
                    modal.style.position = 'fixed';
                    modal.style.top = '0';
                    modal.style.left = '0';
                    modal.style.width = '100%';
                    modal.style.height = '100%';
                    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
                    modal.style.display = 'flex';
                    modal.style.alignItems = 'center';
                    modal.style.justifyContent = 'center';
                    modal.style.zIndex = '1000';
                    modal.style.cursor = 'zoom-out';
                    
                    const imgClone = this.cloneNode(true);
                    imgClone.style.maxWidth = '90%';
                    imgClone.style.maxHeight = '90%';
                    imgClone.style.objectFit = 'contain';
                    
                    modal.appendChild(imgClone);
                    document.body.appendChild(modal);
                    
                    // 点击模态框关闭
                    modal.addEventListener('click', function() {
                        document.body.removeChild(modal);
                    });
                });
            });
            
            // 为投票结果添加动画效果
            const resultFills = document.querySelectorAll('.result-fill');
            setTimeout(() => {
                resultFills.forEach(fill => {
                    const width = fill.style.width;
                    fill.style.width = '0';
                    setTimeout(() => {
                        fill.style.width = width;
                    }, 100);
                });
            }, 500);
        });
    </script>
</body>
</html>
    